import React, { useState, useEffect } from 'react';
import { connect } from 'umi';
import cls from 'classnames';
import styles from './index.less';
import Video from './videoYs';

export const placeholders = new Proxy([], {
  get: function(target, prop, receiver) {
    return `${target.imgPrefix}/${prop}.jpg`;
  },
  set: (target, property, value) => {
    target.imgPrefix = `./images/live-poster/${value}/`;
    return true;
  },
});
let params = new URL(document.location).searchParams;
let id = params.get('i') || '1296256020068786178';
placeholders.imgPrefix = id;

const vw = 450;
const vh = 250;
const Dashboard = ({ videoList }) => {
  const [curActive, setCurActive] = useState(1);

  return (
    <div className={styles.dashboard}>
      {videoList
        .sort((a, b) => a.channelNo - b.channelNo)
        .map((e, i) => {
          return (
            <div key={e.channelNo} className={styles.dashboardItem}>
              {/* <div className={styles.dashboardItemTitle}>{`${e.deviceName}_${e.channelNo}`}</div> */}
              <div className={styles.dashboardItemBody}>
                {curActive === e.channelNo ? (
                  <Video options={{ width: vw + 'px', height: vh + 'px' }} url={e.liveAddress} />
                ) : (
                  <img
                    onClick={() => setCurActive(e.channelNo)}
                    src={placeholders[e.channelNo]}
                    style={{ width: vw }}
                    alt=""
                  />
                )}
              </div>
            </div>
          );
        })}
    </div>
  );
};

// export default Dashboard;
export default connect(({ monitor }) => {
  return { monitor };
})(Dashboard);
